<template>
  <div class="home-root">
    <Earth></Earth>
    <div class="border"></div>
    <div class="title">XXX军用挖掘系统</div>
    <TopicList class="block n1"></TopicList>
    <Tblock class="block n3"></Tblock>
    <Rblock :data="block3" class="block n4"></Rblock>
    <DetailDia class="dia" :class="{hide}" @close="hide = true"></DetailDia>
  </div>
</template>

<script>
import TopicList from './TopicList'
import Rblock from './Rblock'
import Tblock from './Tblock'
import DetailDia from './DetailDia'
import Earth from './Earth'

export default {
  name: 'home',
  components: {TopicList, Tblock, Rblock, DetailDia, Earth},
  data(){
    return {
      block3: [],
      hide: true,
      timer: null
    }
  },
  mounted(){
    fetch('/static/data.json').then(r=>r.json()).then(data=>{
      let data1 = Object.assign({}, data);
      data1.title = "反恐主题"
      this.block3 = data;
    })
    this.timer = setTimeout(this.timeout, 3000 + parseInt(Math.random() * 7000))
  },
  methods: {
    timeout(){
      this.hide = !this.hide
      this.timer = setTimeout(this.timeout, 3000 + parseInt(Math.random() * 7000))
    }
  },
  destroyed(){
    clearTimeout(this.timer)
  }
}
</script>

<style scoped lang="stylus">
.home-root
  overflow hidden
  >.border
    position absolute
    left 0
    right 0
    top 0
    bottom 0
    background-image url(./img/window-border.png)
    background-size 100% 100%

.block
  position absolute
  width 538px
  background rgba(0,0,0,.3)
  top 108px
  left 35px
  right 38.4px
  bottom 50px
  &.n1
    right auto
  &.n3
    height 190px
    left auto
    bottom auto
  &.n4
    height 630px
    left auto
    top auto

.dia
  transition all .5s ease
  &.hide
    transform scale(.5) rotateY(180deg)
    opacity 0
    visibility hidden
    
</style>